﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">
        外部按钮操作swich开关
        <a class="rayui-btn btn-success externalAction" action="render">重新渲染所有控件</a>
        <a class="rayui-btn btn-primary externalAction1" action="toggle">切换所有开关</a>
    </h3>
    <div class="row row-aline">
        <label>外部操作</label>
        <div class="row-content">
            <input class="rayui-swich" id="actionBtn" type="text" ray-title="on|你好" value="on" ray-event="actionBtn-chk"/>
            <a class="rayui-btn btn-primary externalAction" action="swichOn">打开开关</a>
            <a class="rayui-btn btn-primary externalAction" action="swichOff">关闭开关</a>
            <a class="rayui-btn btn-primary externalAction" action="toggle">切换开关</a>
            <a class="rayui-btn btn-primary externalAction" action="click">模拟切换-触发事件</a>
        </div>
    </div>


    <h3 class="spliter">默认样式，返回on或off</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" ray-title="on|" value="on" ray-event="chk1" />
            <input class="rayui-swich" type="button" ray-title="开" />
            <input class="rayui-swich" type="button" ray-title="好|不好" />
            <input class="rayui-swich" type="button" ray-title="" />
            <input class="rayui-swich" type="button" ray-title="|禁止选择" disabled />
            <input class="rayui-swich" type="button" ray-title="字符过长|字符过长你好" />
        </div>
    </div>

    <h3 class="spliter">box样式，返回true或false</h3>
    <div class="row row-aline">
        <label>box样式</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" skin="box" ray-title="on|off" value="true" ray-value="true|false" ray-event="chk2" />
            <input class="rayui-swich" type="button" skin="box" ray-title="开" />
            <input class="rayui-swich" type="button" skin="box" ray-title="好|不好" />
            <input class="rayui-swich" type="button" skin="box" ray-title="" />
            <input class="rayui-swich" type="button" skin="box" ray-title="|禁止选择" disabled />
            <input class="rayui-swich" type="button" skin="box" ray-title="字符过长|字符过长你好" />
        </div>
    </div>

    <h3 class="spliter">按钮大小</h3>
    <div class="row row-aline">
        <label>默认样式大小</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" ray-size="4x-sh" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="3x-sh" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="2x-sh" ray-title="on|好" value="on" />
            <input class="rayui-swich" type="button" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="2x" ray-title="on|你好" value="on" />
            <input class="rayui-swich" type="button" ray-size="3x" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="4x" ray-title="on|off" value="on" />
        </div>
    </div>

    <div class="row row-aline">
        <label>box样式大小</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" ray-size="4x-sh" skin="box" ray-title="on|1" value="on" />
            <input class="rayui-swich" type="button" ray-size="3x-sh" skin="box" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="2x-sh" skin="box" ray-title="on|add" value="on" />
            <input class="rayui-swich" type="button" skin="box" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="2x" skin="box" ray-title="on|off" value="on" />
            <input class="rayui-swich" type="button" ray-size="3x" skin="box" ray-title="on|san" value="on" />
            <input class="rayui-swich" type="button" ray-size="4x" skin="box" ray-title="on|off" value="on" />
        </div>
    </div>

    <script>
        rayui.use(["swich", "layer"],
            function () {

                var swich = rayui.swich,
                    layer = rayui.layer;

                swich.render();
                swich.on("swich",
                    function (obj) {
                        //obj包含:event，elem，checked
                        layer.msg("ray-event=" + obj.event + "的复选框状态：" + obj.value, { time: 2000, shade: false });
                    });

                $(".externalAction").click(function () {
                    var action = $(this).attr("action");
                    if (action === "render") {
                        swich[action]();
                        return;
                    }
                    swich[action]("#actionBtn");
                });

                $(".externalAction1").click(function () {
                    swich.toggle($("body").find(".rayui-swich"));
                });

            })

    </script>

    <div class="card">
        swich的来源标签建议写input，type可以是text（填写name可以被传值），也可以是button，但必须添加样式rayui-swich
        其他任何标签书添加样式rayui-swich，也可以实现，但重新渲染等功能就失效了，无法保持用户操作结果
    </div>
    <div class="card">
        disabled和readonly标记在功能上是一样的，唯一区别就是disabled的标签在form上传的时候无法上传
    </div>


    <h4 id="anchor">使用说明</h4>
<pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：


属性：
value：当前值，需要和ray-value对应
ray-title：显示内容，格式"on"、"开"、"选中值|非选中值"，必须是选中值在前，中间用“|”分割，不填为空
ray-value：返回值，格式"on"、"开"、"选中值|非选中值"，必须是选中值在前，中间用“|”分割，不填默认为on|off
ray-event：监听swich事件的标记，配合on事件的container，可以实现容器内多个swich的区分
ray-size：大小，可选2x-sh、2x

方法：
on:function (event, callback, container)：监听指定容器内swich开关的event事件，配合ray-event可以实现容器内多个swich的区分；
                event：现在只支持click事件
                callback：function(obj)：obj包含：
                                event: ray-event值,
                                elem: 原始select,
                                value: ray-value数值，全部为字符串类型
                                title：ray-title设置的值
                container：容器
off：function (event, container)：取消监听指定容器内swich开关的event事件。
render:function(container)：container可填可不填，填写可以实现渲染指定容器内的select
swichOn：打开开关，不触发事件
swichOff：关闭开关，不触发事件
toggle：切换开关状态，不触发事件
click：模拟点击，触发事件
</pre>

</body>
</html>